<template>
  <transition name="el-notification-fade">
    <div class='el-sound-notification' v-drag>
       <div class="el-notification__closeBtn el-icon-close" @click='notificationClose'></div>
         <div>
           <old-audio-common v-if="showOld" flagId="callCardOldAudio" :srcUrl="soundUrl" :refreshAudio="refreshAudio" :isShowAudioDownload="false" :isShowSubmitAudio="false"  :currentObj="{}" :isDownload="false"></old-audio-common>
            <audio-common  v-if="!showOld" @showOldAudio="showOldAudio" :callStatus = "'dealing'" flagId="callCardAudio1" :srcUrl="soundUrl" :refreshAudio="0.01"  :isShowAudioDownload="false" :isShowSubmitAudio="false" :currentObj="{}" :pauseAudio="'open'"></audio-common>
         </div>
      </div>
  </transition>
</template>

<script type="text/babel">
  import AudioCommon from '@/components/public-modules/audio'
  import OldAudioCommon from '@/components/public-modules/audio/audio.vue'
  export default {
    data() {
      return {
        visible: true,
        showOld: false
      };
    },

    computed: {
      typeClass() {
        return this.type && typeMap[this.type] ? `el-icon-${ typeMap[this.type] }` : '';
      },
      horizontalClass() {
        return this.position.indexOf('right') > -1 ? 'right' : 'left';
      },
      verticalProperty() {
        return /^top-/.test(this.position) ? 'top' : 'bottom';
      },
      positionStyle() {
        return {
          [this.verticalProperty]: `${ this.verticalOffset }px`
        };
      },
      soundUrl() {
        return this.$store.state.call.SoundrecordingCard.soundUrl
      }
    },

    watch: {
      closed(newVal) {
        if (newVal) {
          this.visible = false;
          this.$el.addEventListener('transitionend', this.destroyElement);
        }
      }
    },

    methods: {
      destroyElement() {
        this.$el.removeEventListener('transitionend', this.destroyElement);
        this.$destroy(true);
        this.$el.parentNode.removeChild(this.$el);
      },

      click() {
        if (typeof this.onClick === 'function') {
          this.onClick();
        }
      },

      close() {
        this.closed = true;
        if (typeof this.onClose === 'function') {
          this.onClose();
        }
      },

      clearTimer() {
        clearTimeout(this.timer);
      },

      startTimer() {
        if (this.duration > 0) {
          this.timer = setTimeout(() => {
            if (!this.closed) {
              this.close();
            }
          }, this.duration);
        }
      },
      keydown(e) {
        if (e.keyCode === 46 || e.keyCode === 8) {
          this.clearTimer(); // detele 取消倒计时
        } else if (e.keyCode === 27) { // esc关闭消息
          if (!this.closed) {
            this.close();
          }
        } else {
          this.startTimer(); // 恢复倒计时
        }
      },
      showOldAudio (curr) { // 展示旧的音频组件（原生audio）
        this.showOld = curr
      },
      notificationClose () {
        this.$store.commit('call/CALL_SOUNDRECORDINGCARD_VISIBLE', false)
      }
    },
    mounted() {
      if (this.duration > 0) {
        this.timer = setTimeout(() => {
          if (!this.closed) {
            this.close();
          }
        }, this.duration);
      }
      document.addEventListener('keydown', this.keydown);
    },
    beforeDestroy() {
      document.removeEventListener('keydown', this.keydown);
    },
    components: {
      AudioCommon,
      OldAudioCommon
    },
    directives: {
      drag(el,bindings){
        let dragBox = el; //获取当前元素
        dragBox.onmousedown = e => {
            //算出鼠标相对元素的位置
            let disX = e.clientX - dragBox.offsetLeft;
            let disY = e.clientY - dragBox.offsetTop;
            document.onmousemove = e => {
            //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
              let left = e.clientX - disX;
              let top = e.clientY - disY;
              //移动当前元素
              dragBox.style.left = left + "px";
              dragBox.style.top = top + "px";
            }
            document.onmouseup = e => {
              //鼠标弹起来的时候不再移动
              document.onmousemove = null;
              //预防鼠标弹起来后还会循环（即预防鼠标放上去的时候还会移动）  
              document.onmouseup = null;
            }
        }
      }
    }
  };
</script>
<style lang="stylus" scoped>
  .el-notification-fade-enter-active, .el-notification-fade-leave-active 
    transition: opacity .5s
  .el-notification-fade-enter, .el-notification-fade-leave-to
    opacity: 0
  .el-sound-notification
    position fixed
    right 16px
    bottom 16px
    z-index 2036
    padding: 10px;
    border-radius: 8px
    box-sizing: border-box
    border: 1px solid #EBEEF5
    position: fixed
    background-color: #FFF
    box-shadow: 0 2px 12px 0 rgba(0,0,0,.1)
    width: 450px
    height: 200px 
</style>